// 配置Tailwind自定义颜色和字体
tailwind.config = {
    theme: {
        extend: {
            colors: {
                primary: '#165DFF',
                secondary: '#36CFC9',
                accent: '#722ED1',
                neutral: '#F5F7FA',
                dark: '#1D2129'
            },
            fontFamily: {
                inter: ['Inter', 'system-ui', 'sans-serif'],
            },
        }
    }
}

 // 初始化筛选功能
        document.addEventListener('DOMContentLoaded', function() {
            // 定义不同联系人的自动回复内容
            const replyTemplates = {
                1: [  // 李四 - 项目同事
                    "好的，关于会议时间，我下周一下午和周三全天都有空，你看哪个时间合适？",
                    "我已经看到你分享的新想法了，很有启发性，我们下午详细讨论下吧。",
                    "没问题，我会提前准备好会议所需的资料和文档。",
                    "关于项目进度，我这边已经完成了数据收集部分，正在进行分析。"
                ],
                3: [  // 王五 - 文件对接
                    "不客气，有任何疑问随时告诉我，我会尽快解答。",
                    "除了这份文件，还需要其他相关资料吗？",
                    "如果有需要修改的地方，请标记出来，我会尽快处理。",
                    "这份文件的截止日期是周五，对吧？我会在此之前完成审核。"
                ],
                4: [  // 赵六 - 技术讨论
                    "数据可视化模块确实很重要，我们可以考虑使用Chart.js或ECharts来实现。",
                    "关于用户增长趋势图表，需要包含哪些具体指标呢？",
                    "实时更新可能会对服务器造成压力，我们可以设计成15分钟更新一次。",
                    "我已经查看了数据来源，格式基本统一，可以直接接入可视化组件。"
                ]
            };
            
            // 获取消息列表容器
            const messageListContainer = document.getElementById('message-list-container');
            // 获取所有筛选按钮
            const filterButtons = document.querySelectorAll('.filter-btn');
            // 获取所有消息项
            const messageItems = document.querySelectorAll('[data-contact-id]');
            
            // 使用事件委托处理消息项点击，解决筛选后元素不可点击的问题
            messageListContainer.addEventListener('click', function(e) {
                const messageItem = e.target.closest('[data-contact-id]');
                if (messageItem && !messageItem.classList.contains('message-hidden')) {
                    const contactId = messageItem.getAttribute('data-contact-id');
                    switchChat(contactId);
                    
                    // 如果是未读消息，标记为已读
                    if (messageItem.getAttribute('data-read') === 'false') {
                        messageItem.setAttribute('data-read', 'true');
                        // 移除未读标记
                        const unreadIndicator = messageItem.querySelector('.bg-red-500.rounded-full');
                        if (unreadIndicator) {
                            unreadIndicator.remove();
                        }
                    }
                }
            });
            
            // 为每个筛选按钮添加点击事件
            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除所有按钮的活跃状态
                    filterButtons.forEach(btn => {
                        btn.classList.remove('text-primary', 'border-primary', 'border-b-2');
                        btn.classList.add('text-gray-500');
                    });
                    
                    // 设置当前按钮为活跃状态
                    this.classList.add('text-primary', 'border-primary', 'border-b-2');
                    this.classList.remove('text-gray-500');
                    
                    const filter = this.getAttribute('data-filter');
                    
                    // 根据筛选条件显示或隐藏消息项
                    messageItems.forEach(item => {
                        const type = item.getAttribute('data-type');
                        const isRead = item.getAttribute('data-read') === 'true';
                        
                        let shouldShow = false;
                        
                        switch(filter) {
                            case 'all':
                                // 显示所有消息
                                shouldShow = true;
                                break;
                            case 'unread':
                                // 只显示未读消息
                                shouldShow = !isRead;
                                break;
                            case 'system':
                                // 只显示系统消息
                                shouldShow = type === 'system';
                                break;
                        }
                        
                        // 使用自定义类控制显示/隐藏，避免直接操作display属性
                        if (shouldShow) {
                            item.classList.remove('message-hidden');
                        } else {
                            item.classList.add('message-hidden');
                        }
                    });
                    
                    // 如果当前没有选中的消息，默认选中第一个可见的消息
                    const activeItem = document.querySelector('.border-primary.bg-primary\\/5:not(.message-hidden)');
                    if (!activeItem) {
                        const firstVisibleItem = document.querySelector('[data-contact-id]:not(.message-hidden)');
                        if (firstVisibleItem) {
                            switchChat(firstVisibleItem.getAttribute('data-contact-id'));
                        }
                    }
                });
            });
            
            // 切换聊天窗口函数
            function switchChat(contactId) {
                // 更新消息列表选中状态
                messageItems.forEach(item => {
                    if (item.getAttribute('data-contact-id') === contactId) {
                        item.classList.add('border-primary', 'bg-primary/5');
                    } else {
                        item.classList.remove('border-primary', 'bg-primary/5');
                    }
                });
                
                // 显示对应的聊天窗口
                const chatContainers = document.querySelectorAll('.chat-container');
                chatContainers.forEach(container => {
                    if (container.getAttribute('data-contact-id') === contactId) {
                        container.classList.remove('hidden');
                    } else {
                        container.classList.add('hidden');
                    }
                });
            }
            
            // 发送消息功能
            const sendButtons = document.querySelectorAll('.send-button');
            sendButtons.forEach(button => {
                button.addEventListener('click', function() {
                    sendMessage(this);
                });
            });
            
            // 输入框回车发送消息
            const messageInputs = document.querySelectorAll('.message-input');
            messageInputs.forEach(input => {
                input.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        sendMessage(this.nextElementSibling);
                    }
                });
            });
            
            // 发送消息函数
            function sendMessage(button) {
                const input = button.previousElementSibling;
                const message = input.value.trim();
                
                if (message) {
                    const chatContainer = button.closest('.chat-container');
                    const messagesContainer = chatContainer.querySelector('.chat-messages');
                    const contactId = chatContainer.getAttribute('data-contact-id');
                    
                    // 创建新消息元素
                    const now = new Date();
                    const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
                    
                    const messageElement = document.createElement('div');
                    messageElement.className = 'flex items-start justify-end mb-6';
                    messageElement.innerHTML = `
                        <div class="mr-3 max-w-[70%]">
                            <p class="bg-primary text-white p-3 rounded-lg rounded-tr-none shadow-sm text-sm">
                                ${message}
                            </p>
                            <span class="text-xs text-gray-500 mt-1 block text-right">${timeString}</span>
                        </div>
                        <img src="https://picsum.photos/id/64/200/200" alt="自己头像" class="w-8 h-8 rounded-full object-cover">
                    `;
                    
                    // 添加到消息容器并滚动到底部
                    messagesContainer.appendChild(messageElement);
                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
                    
                    // 清空输入框
                    input.value = '';
                    
                    // 更新左侧消息列表中的最后一条消息
                    const messageItem = document.querySelector(`[data-contact-id="${contactId}"]`);
                    if (messageItem) {
                        const messageText = messageItem.querySelector('p');
                        const timeText = messageItem.querySelector('span.text-xs');
                        
                        if (messageText && timeText) {
                            messageText.textContent = message;
                            timeText.textContent = timeString;
                        }
                    }
                    
                    // 如果该联系人有预设回复，添加自动回复
                    if (replyTemplates[contactId]) {
                        // 移除之前的输入状态提示
                        const typingIndicators = messagesContainer.querySelectorAll('.typing-indicator');
                        typingIndicators.forEach(indicator => indicator.remove());
                        
                        // 添加"正在输入"提示
                        const typingIndicator = document.createElement('div');
                        typingIndicator.className = 'flex items-start mb-6 typing-indicator';
                        
                        // 获取联系人头像
                        const avatarSrc = document.querySelector(`[data-contact-id="${contactId}"] img`).src;
                        
                        typingIndicator.innerHTML = `
                            <img src="${avatarSrc}" alt="对方头像" class="w-8 h-8 rounded-full object-cover">
                            <div class="ml-3 bg-white p-2 px-4 rounded-lg rounded-tl-none shadow-sm">
                                <div class="typing-animation">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </div>
                        `;
                        messagesContainer.appendChild(typingIndicator);
                        messagesContainer.scrollTop = messagesContainer.scrollHeight;
                        
                        // 随机选择一个回复内容，2-3秒后显示
                        const delay = 2000 + Math.random() * 1000;
                        setTimeout(() => {
                            // 移除"正在输入"提示
                            typingIndicator.remove();
                            
                            // 随机选择一个回复
                            const replies = replyTemplates[contactId];
                            const randomReply = replies[Math.floor(Math.random() * replies.length)];
                            
                            // 创建回复消息元素
                            const replyElement = document.createElement('div');
                            replyElement.className = 'flex items-start mb-6';
                            replyElement.innerHTML = `
                                <img src="${avatarSrc}" alt="对方头像" class="w-8 h-8 rounded-full object-cover">
                                <div class="ml-3 max-w-[70%]">
                                    <p class="bg-white p-3 rounded-lg rounded-tl-none shadow-sm text-sm">
                                        ${randomReply}
                                    </p>
                                    <span class="text-xs text-gray-500 mt-1 block">${timeString}</span>
                                </div>
                            `;
                            
                            // 添加回复并滚动到底部
                            messagesContainer.appendChild(replyElement);
                            messagesContainer.scrollTop = messagesContainer.scrollHeight;
                            
                            // 更新左侧消息预览
                            if (messageItem) {
                                messageText.textContent = randomReply;
                            }
                        }, delay);
                    }
                }
            }
            
            // 移动端菜单切换
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const mobileMenu = document.getElementById('mobile-menu');
            
            if (mobileMenuButton && mobileMenu) {
                mobileMenuButton.addEventListener('click', function() {
                    mobileMenu.classList.toggle('hidden');
                });
            }
        });
        document.addEventListener('DOMContentLoaded', function() {
    // 验证用户登录状态并获取用户信息
    const users = JSON.parse(localStorage.getItem('registeredUsers')) || [];
    const loginEmail = localStorage.getItem('currentLoginEmail');
    
    if (!loginEmail) {
        window.location.href = 'index.html';
        return;
    }
    
    // 查找当前登录用户
    const currentUser = users.find(user => user.email === loginEmail);
    
    if (currentUser) {
        // 更新右上角显示的用户名
        const userDisplayName = document.getElementById('user-display-name');
        if (userDisplayName) {
            userDisplayName.textContent = currentUser.name;
        }
    } else {
        // 如果用户不存在，清除登录状态并跳转到登录页
        localStorage.removeItem('currentLoginEmail');
        window.location.href = 'index.html';
    }
     // 用户菜单下拉功能
            const userMenuButton = document.getElementById('user-menu-button');
            const userMenuDropdown = document.getElementById('user-menu-dropdown');
            
            // 点击头像切换菜单显示/隐藏
            userMenuButton.addEventListener('click', function(event) {
                event.stopPropagation(); // 防止事件冒泡
                userMenuDropdown.classList.toggle('hidden');
            });
            
            // 点击页面其他地方关闭菜单
            document.addEventListener('click', function(event) {
                if (!userMenuButton.contains(event.target) && !userMenuDropdown.contains(event.target)) {
                    userMenuDropdown.classList.add('hidden');
                }
            });
            
            // 退出登录功能
            document.getElementById('logout-button').addEventListener('click', function() {
                localStorage.removeItem('currentLoginEmail');
                window.location.href = 'index.html';
            });
            
     updateAvatar();
    
    // 监听头像更新事件
    window.addEventListener('avatarUpdated', function(e) {
        const headerAvatar = document.getElementById('header-avatar');
        if (headerAvatar) {
            headerAvatar.src = e.detail.avatar;
        }
    });
    
    // 监听本地存储变化（应对多标签页情况）
    window.addEventListener('storage', function(e) {
        if (e.key === 'registeredUsers') {
            updateAvatar();
        }
    });
    const imageUploadBtns = document.querySelectorAll('#image-upload-btn');
    const imageFileInput = document.createElement('input');
    imageFileInput.type = 'file';
    imageFileInput.accept = 'image/*';
    imageFileInput.className = 'hidden';
    document.body.appendChild(imageFileInput);

    // 为所有图片按钮添加点击事件
    imageUploadBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            // 触发文件选择对话框
            imageFileInput.click();
        });
    });

    // 处理文件选择
    imageFileInput.addEventListener('change', function(e) {
        if (e.target.files && e.target.files[0]) {
            const file = e.target.files[0];
            const reader = new FileReader();

            reader.onload = function(event) {
                // 获取当前活跃的聊天窗口
                const activeChat = document.querySelector('.chat-container:not(.hidden)');
                if (!activeChat) return;

                // 获取发送按钮元素用于调用发送逻辑
                const sendButton = activeChat.querySelector('.send-button');
                if (!sendButton) return;

                // 创建图片消息元素
                const now = new Date();
                const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
                const contactId = activeChat.getAttribute('data-contact-id');
                
                const messagesContainer = activeChat.querySelector('.chat-messages');
                const messageElement = document.createElement('div');
                messageElement.className = 'flex items-start justify-end mb-6';
                messageElement.innerHTML = `
                    <div class="mr-3 max-w-[70%]">
                        <div class="bg-primary p-1 rounded-lg rounded-tr-none shadow-sm">
                            <img src="${event.target.result}" alt="发送的图片" class="w-full h-auto rounded">
                        </div>
                        <span class="text-xs text-gray-500 mt-1 block text-right">${timeString}</span>
                    </div>
                    <img src="https://picsum.photos/id/64/200/200" alt="自己头像" class="w-8 h-8 rounded-full object-cover">
                `;

                // 添加到消息容器并滚动到底部
                messagesContainer.appendChild(messageElement);
                messagesContainer.scrollTop = messagesContainer.scrollHeight;

                // 更新左侧消息列表预览
                const messageItem = document.querySelector(`[data-contact-id="${contactId}"]`);
                if (messageItem) {
                    const messageText = messageItem.querySelector('p');
                    const timeText = messageItem.querySelector('span.text-xs');
                    
                    if (messageText && timeText) {
                        messageText.textContent = '[图片]';
                        timeText.textContent = timeString;
                    }
                }

                // 模拟对方回复(如果有预设回复)
                if (replyTemplates[contactId]) {
                    // 移除之前的输入状态提示
                    const typingIndicators = messagesContainer.querySelectorAll('.typing-indicator');
                    typingIndicators.forEach(indicator => indicator.remove());
                    
                    // 添加"正在输入"提示
                    const typingIndicator = document.createElement('div');
                    typingIndicator.className = 'flex items-start mb-6 typing-indicator';
                    
                    // 获取联系人头像
                    const avatarSrc = document.querySelector(`[data-contact-id="${contactId}"] img`).src;
                    
                    typingIndicator.innerHTML = `
                        <img src="${avatarSrc}" alt="对方头像" class="w-8 h-8 rounded-full object-cover">
                        <div class="ml-3 bg-white p-2 px-4 rounded-lg rounded-tl-none shadow-sm">
                            <div class="typing-animation">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>
                    `;
                    messagesContainer.appendChild(typingIndicator);
                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
                    
                    // 2-3秒后显示回复
                    const delay = 2000 + Math.random() * 1000;
                    setTimeout(() => {
                        // 移除"正在输入"提示
                        typingIndicator.remove();
                        
                        // 随机选择一个回复
                        const replies = replyTemplates[contactId];
                        const randomReply = replies[Math.floor(Math.random() * replies.length)];
                        
                        // 创建回复消息元素
                        const replyElement = document.createElement('div');
                        replyElement.className = 'flex items-start mb-6';
                        replyElement.innerHTML = `
                            <img src="${avatarSrc}" alt="对方头像" class="w-8 h-8 rounded-full object-cover">
                            <div class="ml-3 max-w-[70%]">
                                <p class="bg-white p-3 rounded-lg rounded-tl-none shadow-sm text-sm">
                                    ${randomReply}
                                </p>
                                <span class="text-xs text-gray-500 mt-1 block">${timeString}</span>
                            </div>
                        `;
                        
                        // 添加回复并滚动到底部
                        messagesContainer.appendChild(replyElement);
                        messagesContainer.scrollTop = messagesContainer.scrollHeight;
                        
                        // 更新左侧消息预览
                        if (messageItem) {
                            messageText.textContent = randomReply;
                        }
                    }, delay);
                }
            };

            // 读取图片文件
            reader.readAsDataURL(file);
            
            // 重置文件输入，允许重复选择同一文件
            imageFileInput.value = '';
        }
    });
    // 同步头像的函数
    function syncMyAvatars(avatarSrc) {
        // 更新聊天区域中所有"我的头像"
        const myMessageAvatars = document.querySelectorAll('.flex.items-start.justify-end .w-8.h-8.rounded-full.object-cover');
        myMessageAvatars.forEach(avatar => {
            avatar.src = avatarSrc;
        });
    }
    
    // 初始加载时同步头像
    updateAvatar(); // 调用已有的更新头像函数
    const headerAvatar = document.getElementById('header-avatar');
    if (headerAvatar && headerAvatar.src) {
        syncMyAvatars(headerAvatar.src);
    }
    
    // 监听头像更新事件（来自个人资料设置页面）
    window.addEventListener('avatarUpdated', function(e) {
        if (e.detail && e.detail.avatar) {
            syncMyAvatars(e.detail.avatar);
        }
    });
    
    // 监听本地存储变化，确保多标签页情况下的同步
    window.addEventListener('storage', function(e) {
        if (e.key === 'registeredUsers') {
            // 先更新头部头像
            updateAvatar();
            
            // 再同步聊天区域头像
            const updatedHeaderAvatar = document.getElementById('header-avatar');
            if (updatedHeaderAvatar && updatedHeaderAvatar.src) {
                syncMyAvatars(updatedHeaderAvatar.src);
            }
        }
    });

});
function updateAvatar() {
        const users = JSON.parse(localStorage.getItem('registeredUsers')) || [];
        const loginEmail = localStorage.getItem('currentLoginEmail');
        const currentUser = users.find(user => user.email === loginEmail);
        
        // 更新导航栏中的头像
        const headerAvatar = document.getElementById('header-avatar');
        if (currentUser && currentUser.avatar && headerAvatar) {
            headerAvatar.src = currentUser.avatar;
        }
    }